<template>
    <app-touch @move="move" @moveEnd="moveEnd" @moveStart="moveStart">
      <view class="form-slider-container"
            :style="`height:${height}`"
      >
        <view class="body" :style="style">
          <slot></slot>
        </view>
        <view class="menu" :style="style" @click="closeMenu">
          <slot name="menu"></slot>
        </view>
      </view>
    </app-touch>
</template>
<script lang="ts" setup>
import {getElementStyle, globalEventListen, globalEventPublish} from "@/util/PageUtil";

import { ref, onMounted, defineProps } from 'vue'
const props = defineProps({
  duration: {
    type: Number,
    default: 0.25,
    descriptors: '动画持续时间,单位:秒'
  },
  height: {
    type: String,
    default: '120rpx',
    descriptors: '高度'
  }
});

const maxOffset = ref(0)
const timeSpeed = ref(0.0025)
onMounted(()=>{
  //计算右边菜单的宽度
  getElementStyle('.menu', (data)=>{
    const width = data.width
    maxOffset.value = width
    if(!!props.duration){
      timeSpeed.value = props.duration/width
    }
  })

  globalEventListen("form:slider:global", ()=>{
    if(expandMenu){
      closeMenu()
    }
  })
})
const style = ref('')
const expandMenu = ref(false)
const translateX = ref({
  distance: 0,
  direction: -1
})

const moveStart = ()=>{
  globalEventPublish("form:slider:global")
}
const move = (e)=>{
  const { moveX } = e
  let distance = Math.abs(moveX)
  const direction = moveX > 0 ? 1 : -1;//左移-1 右移1

  if(distance === 0){
    return;
  }
  if(distance >= maxOffset.value){
    distance = maxOffset.value
  }
  if(expandMenu.value && direction === -1){
    return
  }
  if(!expandMenu.value && direction === 1){
    return
  }
  if(direction === -1){
    //左移
    style.value = `transform: translateX(${-distance}px);`
  }else {
    //右移
    style.value = `transform: translateX(${-maxOffset.value + distance}px);`
  }
  translateX.value = {
    distance: distance,
    direction: direction
  }
}
const moveEnd = ()=>{
  const tempTranslateX = translateX.value
  if(tempTranslateX.distance === 0){
    return
  }
  const expand = expandMenu.value
  if((expand && tempTranslateX.direction === -1) || (!expand && tempTranslateX.direction === 1)){
    return;
  }
  const maxDistance = maxOffset.value
  const transformTime = timeSpeed.value * (maxDistance - tempTranslateX.distance)
  const transition = transformTime > 0 ? `transition: all ${transformTime}s ease-in-out;` : ''
  if(expand){
    style.value = `transform: translateX(0px);${transition}`
    expandMenu.value = false
  }else {
    style.value = `transform: translateX(${-maxDistance}px);${transition}`
    expandMenu.value = true
  }
  tempTranslateX.distance = 0
  translateX.value = tempTranslateX
}

const closeMenu = ()=>{
  const transformTime = timeSpeed.value * maxOffset.value
  style.value = `transform: translateX(0px);transition: all ${transformTime}s ease-in-out;`
  expandMenu.value = false
}
</script>

<style lang="scss">
.form-slider-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  .body{
    flex: none;
    width: 100%;
  }
  .menu{
    flex: none;
    height: inherit;
  }
}
</style>
